<template>
    <el-dialog
            :before-close="closeDialog"
            :visible.sync="localFormVisible" width="60%"
            top="15px"
    >
        <div class="detail-content">
            <span>订餐流程</span>
            <el-steps :active="detailData.statusId || 0" :space="200" finish-status="success">
                <el-step icon="el-icon-edit" title="已提交"></el-step>
                <el-step icon="el-icon-user" title="经理审核"></el-step>
                <el-step icon="el-icon-s-check" title="管理员审核"></el-step>
                <el-step icon="el-icon-check" title="审核完成"></el-step>
            </el-steps>
            <span>审核详情</span>
            <el-table
                    :data="detailData.reviewList"
                    :height="150"
            >
                <el-table-column label="审核人" prop="reviewerName"></el-table-column>
                <el-table-column label="审核人身份" prop="role"></el-table-column>
                <el-table-column label="审核时间" prop="reviewTime"></el-table-column>
                <el-table-column label="审核结果" prop="result"></el-table-column>
                <el-table-column label="审核意见" prop="reviewNote"></el-table-column>
            </el-table>
            <span>餐品详情</span>
            <el-table
                    :data="detailData.mealList"
                    :height="300"
                    border
                    stripe
                    style="width: 100%"
            >
                <el-table-column v-if="false" prop="mealId"></el-table-column>
                <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
                <el-table-column label="餐品名称" prop="mealName" width="180"></el-table-column>
                <el-table-column
                        label="图片"
                        prop="imageUrl"
                        width="180"
                        align="center"
                >
                    <template v-slot="scope">
                        <img
                                :src="require('@/assets/images/'+scope.row.imageUrl)" alt="aaa"
                                style="width: 100px; height: 100px;"
                        >
                    </template>
                </el-table-column>
                <el-table-column :formatter="formatPrice" label="餐品单价" prop="price" width="180" align="right"></el-table-column>
                <el-table-column label="餐品份数" prop="count" width="180" align="right"></el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">关闭</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: "OrderDetail",
    data() {
        return {
            //表单元素宽度
            formLabelWidth: '120px',
            localFormVisible: this.detailVisible,
            rules: {},
            fromData: [],
            tableData: []
        }
    },
    methods: {
        closeDialog() {
            this.localFormVisible = false;
            //通知父组件修改formVisible的值为false
            this.$emit('update:detailVisible', false)
        },

        formatPrice(row, column, cellValue, index) {
            // 使用 toFixed 方法来格式化小数，保留两位小数
            // toFixed 返回的是一个字符串
            return cellValue.toFixed(2);
        },

    },
    props: {
        detailData: {
            type: Object,

        },
        detailVisible: {
            type: Boolean,
            default: false
        },
    },
    watch: {
        detailVisible(newVal) {
            this.localFormVisible = newVal; // 当 `prop` 改变时，更新本地变量
            if (newVal) {
                if (this.$refs['formRef']) {
                    this.$refs['formRef'].resetFields(); // 当弹框打开时重置表单
                }
            }
        }
    },
    created() {

    }
}
</script>

<style scoped>
    .detail-content{
        height: 590px;
    }
</style>